<script setup lang="ts">
import useBiliStore from "@/store/modules/useBiliStore";
import useUserStore from "@/store/modules/useUserStore";
import ThanksPlugin from "./components/ThanksPlugin.vue";
import ReplyPlugin from "./components/ReplyPlugin.vue";
import SongPlugin from "./components/SongPlugin.vue";
import $api from "@/api";

const showLogin = ref(false);
const banners = [
  "https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg",
  "https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg",
  "https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg",
  "https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg"
];
function clickLogin() {
  showLogin.value = true;
}
</script>

<template>
  <div>
    <div class="mb-4">
      <n-carousel
        effect="card"
        slides-per-view="auto"
        :centered-slides="true"
        draggable
        style="height: 240px"
      >
        <template v-for="(item, idx) in banners" :key="idx">
          <img class="carousel-img" :src="item" style="width: 60%" />
        </template>
      </n-carousel>
    </div>
    <div class="flex-sc h-8 mb-4">
      <div class="h-full w-5px rounded-full bg-green-600 mr-2"></div>
      <div class="text-xl font-bold">B站插件</div>
    </div>
    <div class="flex-sc flex-wrap gap-4">
      <ThanksPlugin @login="clickLogin" />
      <ReplyPlugin @login="clickLogin" />
      <SongPlugin />
    </div>
    <MLogin v-model:show="showLogin" />
  </div>
</template>

<style scoped lang="scss">
.carousel-img {
  margin: 0 auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
